import React, { useState } from 'react';
import './Carousel.css'; // 确保你的CSS文件被正确导入

const images = [
    { id: 1, name: '金融', src: 'https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/7297a2ece97fb3e9c85dda0eb11cfec3.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1' },
    { id: 2, name: '生鲜', src: 'https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/088a3e8e249261d71aa31eb68e151364.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1' },
    { id: 3, name: '家居', src: 'https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/ce2e3ea89e0de40c415390d4172aaf6d.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1' },
    { id: 4, name: '科技', src: 'https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/8947fa99ee105eb66d7333013afc00d7.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1' },
    { id: 5, name: '媒体', src: 'https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/9e040b3fa2e364567fb162480215facf.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1' },
    { id: 6, name: '家电', src: 'https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/9102d74748aaa49c221ae1847996ee62.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1' },
    { id: 7, name: '电商', src: 'https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/6b673d2ef32ac946904edf2db06389ac.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1' },
    { id: 8, name: '文化', src: 'https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/f17f80c2ebadae96c1fadf01713dd195.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1' },
    { id: 9, name: '地产', src: 'https://cdn.dancf.com/fe-assets/20231124/ka-homepage-cases/44b1544837dfabe1fd3cf773d5761e7d.jpg?x-oss-process=image/format,webp/quality,q_80/interlace,1' },
];

const Services = () => {
    const [currentImageId, setCurrentImageId] = useState(1); // 初始选中第一张图片

    const handleTabClick = (imageId) => {
        setCurrentImageId(imageId); // 更新当前选中的图片ID
    };

    const currentImage = images.find(image => image.id === currentImageId); // 根据ID找到当前图片

    return (
        <div>
            <div style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
            }}>
                <h1>与众多优秀品牌</h1>
                <h1>共创营销数字化转型新实践</h1>
            </div>
            <div className="carousel-container">
                <div className="carousel-tabs">
                    {images.map(image => (
                        <button
                            key={image.id}
                            className={`carousel-tab ${image.id === currentImageId ? 'active' : ''}`}
                            onClick={() => handleTabClick(image.id)}
                        >
                            {image.name}
                        </button>
                    ))}
                </div>
                <div className="carousel-image">
                    {currentImage && <img src={currentImage.src} />}
                </div>
            </div></div>

    );
};

export default Services;